<script lang="ts">
    import { onMount } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { NoticeConfig } from "./Notice";
    import Icon from "../Common/Icons/Icon.svelte";
    import { fly } from "svelte/transition";

    const props = $props();

    let visible = $state(false);

    const data: NoticeConfig = props.data;

    const { style, icon, buttons, type, theme = "default", title, content, closeIcon, dock } = data;
    const hasIcon = icon !== null;
    const classList = $derived(
        useClassList(props, "cm-notification-item", {
            "cm-notification-item-width-icon": hasIcon,
            [`cm-notification-item-${type}`]: type,
            [`cm-notification-theme-${theme}`]: theme,
        }),
    );

    onMount(() => {
        // 设置效果
        setTimeout(() => {
            visible = true;
        });
        if (data.duration) {
            setTimeout(() => {
                hide();
            }, data.duration * 1000);
        }
    });

    export const hide = () => {
        visible = false;
    };

    const close = () => {
        props.onclose?.(data.key, data.dock);
    };
</script>

{#snippet getIcon(type?: string)}
    {#if type === "info"}
        <Icon icon="info" size={19} />
    {/if}
    {#if type === "success"}
        <Icon icon="checkCircle" size={19} />
    {/if}
    {#if type === "warning"}
        <Icon icon="warning" size={19} />
    {/if}
    {#if type === "error"}
        <Icon icon="xCircle" size={19} />
    {/if}
    {#if type === "help"}
        <Icon icon="help" size={19} />
    {/if}
{/snippet}

{#if visible}
    <div class={classList} {style} in:fly={{ x: dock?.endsWith("Right") ? 350 : -350 }} out:fly={{ y: -50 }} onoutroend={close}>
        <div class="cm-notification-item-wrap">
            {#if hasIcon}
                <div class="cm-notification-icon">
                    {#if icon}
                        {@render icon()}
                    {:else}
                        {@render getIcon(type)}
                    {/if}
                </div>
            {/if}
            <div class="cm-notification-content">
                {#if title}
                    <div class="cm-notification-head">
                        {#if typeof title === "function"}
                            {@render title()}
                        {:else}
                            {title}
                        {/if}
                        <a class="cm-notification-close" onclick={hide}>
                            {#if closeIcon}
                                {@render closeIcon()}
                            {:else}
                                <Icon icon="times" />
                            {/if}
                        </a>
                    </div>
                {/if}
                <div class="cm-notification-body">
                    {#if typeof content === "function"}
                        {@render content()}
                    {:else}
                        {content}
                    {/if}
                </div>
                {#if buttons}
                    <span class="cm-notification-btn-wrap">
                        {@render buttons(props.data)}
                    </span>
                {/if}
            </div>
        </div>
    </div>
{/if}
